<template>
<div>
<div>
  <div class="table-title">
    <i class="el-icon-info"></i>
    <span class="num">数据一共{{tableData.counts}}条</span>
  </div>
  <el-table
    :data="tableData.items"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="subjectID"
      label="学科"
      width="120"
     >
    </el-table-column>
    <el-table-column
      prop="catalogID"
      label="目录"
      width="120"
    >
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="120"
    >
    </el-table-column>
    <el-table-column
      prop="question"
      label="题干"
      >
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="录入时间"
      width="180"
     >
    </el-table-column>
     <el-table-column
      prop="difficulty"
      label="难度"
      width="80"
     >
    </el-table-column>
     <el-table-column
      prop="creator"
      label="录入人"
      width="120"
      >
    </el-table-column>
     <el-table-column
      prop="chkState"
      label="审核状态"
      width="120"
     >
    </el-table-column>
     <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="120"
      >
    </el-table-column>
     <el-table-column
      prop="chkUser"
      label="审核人"
      width="120"
     >
    </el-table-column>
     <el-table-column
      prop="publishState"
      label="发布状态"
      width="150"
     >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="questionClick(scope.row)"
        >预览</el-button>
        <el-button @click="examineClick(scope.row)" type="text" :disabled="scope.row.chkState !== 0 " size="small">审核</el-button>
        <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="putClick(scope.row)" type="text" size="small">{{scope.row.publishState !== 1 ? '上架' : '下架'}}</el-button>
        <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
 <el-dialog :visible.sync="dialogVisible" title="题目预览">
      <QuestionPreview  :rowData="rowData" @back="dialogVisible=false"/>
  </el-dialog>
          <!-- 弹框 -->
        <el-dialog
            title="提示"
            :visible.sync="onVisible"
            width="30%"
            :before-close="handleClose">
            <span>
              <i class="el-icon-info"></i>
              您确认下架这道题目吗?</span>
            <span slot="footer" class="dialog-footer">
         <el-button @click="onVisible = false">取 消</el-button>
         <el-button type="primary" @click="onVisible = false">确 定</el-button>
  </span>
</el-dialog>
        <!-- /弹框 -->
         <!-- 弹框 -->
        <el-dialog
            title="提示"
            :visible.sync="delVisible"
            width="30%"
            :before-close="delClose">
            <span>
              <i class="el-icon-info"></i>
              此操作将永久删除该题目, 是否继续?</span>
            <span slot="footer" class="dialog-footer">
         <el-button @click="delVisible = false">取 消</el-button>
         <el-button type="primary" @click="delVisible = false">确 定</el-button>
  </span>
</el-dialog>
        <!-- /弹框 -->
</div>
</template>
<script>
import QuestionPreview from './question-preview'
 export default {
    components:{
      QuestionPreview
    },
    props:{
      tableData:{
        type: Object,
        default: {}
      }
    },
    data() {
      return {
       dialogVisible:false,
       rowData: {},
       disabled:false,
       onVisible:false,
       delVisible:false
      }
    },
     methods: {
    questionClick(rowData){
      console.log('rowData',rowData);
      this.dialogVisible = true
      this.rowData = rowData
    },
    examineClick(examineData){
      console.log('examineData',examineData);
      // if(this.examineData.chkState === 0){
      //   this.disabled = true
      // }else if(this.examineData.chkState === 2){
      //   this.disabled = true
      // }else{
      //   this.disabled = false
      // }
    },
    putClick(putData){
      console.log('putData',putData);
      this.onVisible = true
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    // delVisible(done){
    //     this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    //   }
    delClick(delData){
      console.log('delData',delData);
      this.delVisible = true
    },
    delClose(done){
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
      
  }
  }
</script>
<style scoped lang='scss'>
.table-title{
  background-color: #f4f4f5;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-size: 16px;
  color: #999;
  border-radius: 5px;
  .num{
    margin-left:15px;
  }
}
.upadel_dialog {
  z-index: 2008!important;
}
.on_dialog{
  z-index: 2015!important;
}
.el-icon-info{
  font-size:18px;
  color: #e6a23c;
}
</style>